<template>
	<view class="personal-info-page">
		<view class="up-view">
			<view class="custom-navbar">
				<view class="nav-left"><!-- //@click="goBack" -->
					<!-- <global-arrow direction="left" :size="29" color="#fff"></global-arrow> -->
				</view>
				<view class="nav-title">
					<text class="title">{{ pageTitle }}</text>
				</view>
				<view class="nav-right">
				</view>
			</view>
		</view>

		<!-- 信息列表 -->
		<view class="info-list">
			<view class="cardUp" v-if="order.status === '待使用'">
				<view class="qrcode-area">
					<text class="qrcode-label">核销码：{{ order.verificationCode }}</text>
					<image src="/static/icons/myOrders/wechat_2025-09-08_012844_368.png" mode=""></image>
					<uni-qrcode :text="order.verificationCode" :size="200" margin="0"></uni-qrcode>
				</view>
			</view>

			<view class="cardUp">
				<!-- 订单信息 -->
				<view class="info-card">
					<view class="info-order">
						<text class="info-title">订单信息</text>
						<text class="status" :class="getStatusClass(order.status)">{{ order.status }}</text>
					</view>

					<view class="info-item">
						<text class="label">订单号：</text>
						<text class="value">{{ order.orderNo }}</text>
					</view>
					<view class="info-item">
						<text class="label">服务项目：</text>
						<text class="value">{{ order.serviceItem }}</text>
					</view>
					<view class="info-item">
						<text class="label">服务门店：</text>
						<text class="value">{{ order.storeName }}</text>
						<image src="/static/icons/myOrders/plane@2x.png" mode=""></image>
					</view>
					<view class="info-item">
						<text class="label">下单时间：</text>
						<text class="value">{{ order.orderTime }}</text>
					</view>
					<view class="info-item" v-if="order.reserveTime">
						<text class="label">预约时间：</text>
						<text class="value">{{ order.reserveTime }}</text>
					</view>
					<view class="info-item">
						<text class="label">车辆：</text>
						<text class="value">{{ order.carInfo }}</text>
					</view>
					<view class="info-item">
						<text class="label">备注：</text>
						<text class="value">{{ order.remark }}</text>
					</view>
				</view>
			</view>
			<view class="cardUp">
				<!-- 订单详情 -->
				<view class="detail-card">
					<view class="info-order">
						<text class="detail-title">订单详情</text>
					</view>
					<view class="carService">
						<view class="detail-item">
							<text class="label">车辆精洗</text>
							<text class="price">¥{{ order.carWashPrice }}</text>
						</view>
						<view class="detail-item">
							<text class="label">车辆附加费用</text>
							<text class="price">¥{{ order.extraFee }}</text>
						</view>
					</view>
					<view class="priceService">
						<view class="detail-item">
							<text class="label">原价</text>
							<text class="price">¥{{ order.originalPrice }}</text>
						</view>
						<view class="detail-item">
							<text class="label">店家优惠</text>
							<text class="discount">-¥{{ order.storeDiscount }}</text>
						</view>
					</view>
					<view class="couponService">
						<view class="detail-item">
							<text class="label">优惠券</text>
							<text class="discount">-¥{{ order.couponDiscount }}</text>
						</view>
					</view>


					<view class="detail-item">
						<text class="label">支付金额</text>
						<text class="pay-amount">¥{{ order.payAmount }}</text>
					</view>
				</view>
			</view>
			<view class="cardUp" v-if="order.status === '已完成'">
				<!-- 评价结果（仅已完成状态显示） -->
				<view class="evaluation-card">
					<view class="info-order">
						<text class="evaluation-title">评价结果</text>
					</view>
					<view class="evaluation-item">
						<text class="label">评价时间：</text>
						<text class="value">{{ order.evaluationTime }}</text>
					</view>
					<view class="evaluation-item">
						<text class="label">评价结果：</text>
						<text class="stars">{{ getStars(order.evaluationStars) }}</text>
					</view>
					<view class="evaluation-item">
						<text class="label">评语：</text>
						<text class="value">{{ order.evaluationContent }}</text>
					</view>
				</view>
			</view>
		</view>


		<!-- 底部操作按钮（根据状态显示不同按钮） -->
		<view class="action-bar">
			<view class="contact" @click="contactCustomerService">
				<image src="/static/icons/myOrders/客服@2x.png" mode=""></image>
				<text class="contact-btn">联系客服</text>
			</view>

			<view class="action-btns">
				<button v-if="order.status === '待支付'" class="action-btn cancel-btn" @click="cancelOrder">取消订单</button>
				<button v-if="order.status === '待支付'" class="action-btn pay-btn" @click="payOrder">立即支付</button>

				<button v-if="order.status === '待评价'" class="action-btn evaluate-btn" @click="goEvaluate">立即评价</button>
				<button v-if="order.status === '待评价'" class="action-btn repeat-btn" @click="repeatOrder">再来一单</button>

				<button v-if="order.status === '待使用'" class="action-btn refund-btn" @click="applyRefund">申请退款</button>

				<button v-if="order.status === '已完成' || order.status === '已取消' || order.status === '已退款'"
					class="action-btn repeat-btn" @click="repeatOrder">再来一单</button>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				order: {}, // 订单数据
				pageTitle: '' // 页面标题
			};
		},
		onLoad(options) {
			// 从路由参数中获取订单号
			const {
				orderNo
			} = options;
			// 调用接口获取订单数据
			this.getOrderDetail(orderNo);
		},
		methods: {
			// 调用接口获取订单详情
			getOrderDetail(orderNo) {
				uni.showLoading({
					title: '加载中...'
				});
				// 模拟接口请求
				setTimeout(() => {
					uni.hideLoading();
					// 根据订单号模拟不同状态的订单数据
					let mockOrder = {};
					if (orderNo === '242552525222') {
						// 订单号为242552525222的订单，模拟不同状态
						const status = '待使用'; // 可根据实际情况修改状态
						const baseData = {
							orderNo: '242552525222',
							serviceItem: '车辆保养',
							storeName: '大宝车辆维修店',
							orderTime: '2023-03-12 12:09',
							reserveTime: '2023-03-13 12:09',
							carInfo: '奔驰FWE4/豫A98FHJ',
							remark: '',
							carWashPrice: '39.90',
							extraFee: '0',
							originalPrice: '59.90',
							storeDiscount: '20',
							couponDiscount: '10',
							payAmount: '29.9'
						};
						if (status === '待支付') {
							mockOrder = {
								...baseData,
								status: '待支付',
								priceType: '应付',
								price: '230.56'
							};
						} else if (status === '待评价') {
							mockOrder = {
								...baseData,
								status: '待评价',
								priceType: '实付',
								price: '230.56'
							};
						} else if (status === '待使用') {
							mockOrder = {
								...baseData,
								status: '待使用',
								priceType: '实付',
								price: '230.56',
								verificationCode: 'WE343235V',
								qrcodeUrl: '/static/qrcode.png'
							};
						} else if (status === '已完成') {
							mockOrder = {
								...baseData,
								status: '已完成',
								priceType: '实付',
								price: '230.56',
								evaluationTime: '2022-10-10 11:09',
								evaluationStars: 5,
								evaluationContent: '评语评语评语评语评语评语评语评语'
							};
						} else if (status === '已取消') {
							mockOrder = {
								...baseData,
								status: '已取消',
								priceType: '应付',
								price: '230.56'
							};
						} else if (status === '已退款') {
							mockOrder = {
								...baseData,
								status: '已退款',
								priceType: '实付',
								price: '230.56'
							};
						}
					} else if (orderNo === '242552525223') {
						// 订单号为242552525223的订单（待支付）
						mockOrder = {
							orderNo: '242552525223',
							serviceItem: '轮胎更换',
							storeName: '大宝车辆维修店',
							orderTime: '2023-03-13 10:30',
							status: '待支付',
							priceType: '应付',
							price: '500.00',
							reserveTime: '2023-03-14 10:30',
							carInfo: '宝马X5/豫B12345',
							remark: '',
							carWashPrice: '0',
							extraFee: '0',
							originalPrice: '500.00',
							storeDiscount: '0',
							couponDiscount: '0',
							payAmount: '500.00'
						};
					} else if (orderNo === '242552525224') {
						// 订单号为242552525224的订单（待使用）
						mockOrder = {
							orderNo: '242552525224',
							serviceItem: '汽车美容',
							storeName: '大宝车辆维修店',
							orderTime: '2023-03-14 09:15',
							status: '待使用',
							priceType: '实付',
							price: '199.00',
							reserveTime: '2023-03-15 09:15',
							carInfo: '奥迪A6/豫C67890',
							remark: '',
							carWashPrice: '199.00',
							extraFee: '0',
							originalPrice: '199.00',
							storeDiscount: '0',
							couponDiscount: '0',
							payAmount: '199.00',
							verificationCode: 'WE343236V',
							qrcodeUrl: '/static/qrcode.png'
						};
					}
					this.order = mockOrder;
					// 设置页面标题
					this.setPageTitle(mockOrder.status);
				}, 1000);
			},
			// 设置页面标题
			setPageTitle(status) {
				if (status === '待支付') {
					this.pageTitle = '待支付订单';
				} else if (status === '待评价') {
					this.pageTitle = '待评价订单';
				} else if (status === '待使用') {
					this.pageTitle = '待使用订单';
				} else if (status === '已完成') {
					this.pageTitle = '已完成订单';
				} else if (status === '已取消') {
					this.pageTitle = '已取消订单';
				} else if (status === '已退款') {
					this.pageTitle = '已退款订单';
				}
			},
			// 获取状态样式类名
			getStatusClass(status) {
				if (status === '待支付') {
					return 'statusUnpaid';
				} else if (status === '待评价') {
					return 'statusUnevaluated';
				} else if (status === '待使用') {
					return 'statusUnuse';
				} else if (status === '已完成') {
					return 'statusCompleted';
				} else if (status === '已取消') {
					return 'statusCanceled ';
				} else if (status === '已退款') {
					return 'statusRefunded';
				}
				return '';
			},
			// 生成星级评价
			getStars(count) {
				let stars = '';
				for (let i = 0; i < count; i++) {
					stars += '★';
				}
				return stars;
			},
			// 联系客服
			contactCustomerService() {
				uni.showToast({
					title: '联系客服功能待实现',
					icon: 'none'
				});
			},
			// 取消订单
			cancelOrder() {
				uni.showModal({
					title: '提示',
					content: '确定要取消该订单吗？',
					cancelText: '再想想',
					confirmText: '确认取消',
					success: (res) => {
						if (res.confirm) {
							// 调用取消订单接口
							uni.showLoading({
								title: '取消中...'
							});
							// 模拟接口请求
							setTimeout(() => {
								uni.hideLoading();
								uni.showToast({
									title: '订单已取消',
									icon: 'success'
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 1500);
							}, 1000);
						}
					}
				});
			},
			// 立即支付
			payOrder() {
				uni.showLoading({
					title: '支付中...'
				});
				// 模拟支付流程
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '支付成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				}, 1500);
			},
			// 立即评价
			goEvaluate() {
				uni.navigateTo({
					url: `/pages/evaluate/evaluate?orderNo=${this.order.orderNo}`
				});
			},
			// 再来一单
			repeatOrder() {
				uni.showToast({
					title: '再来一单功能待实现',
					icon: 'none'
				});
			},
			// 申请退款
			applyRefund() {
				uni.navigateTo({
					url: `/pages/refundApply/refundApply?orderNo=${this.order.orderNo}`
				});
			}
		}
	};
</script>

<style scoped>
	.page {
		padding: 0 10rpx;
		background-color: #F8F8F8;
	}

	.up-view {
		padding: 0 20rpx;
		/* background: linear-gradient(to bottom, #3788FF, #0963E7); */
		color: #fff;
		padding-bottom: 250rpx;
		/* 1. 基础渐变背景（作为底层） */
		background: linear-gradient(to bottom, #3788FF, #0963E7);

		/* 2. 添加背景图（叠加在渐变上） */
		/* background-image: url('/static/icons/组 8.png'); */
		/* 背景图路径 */

		/* 3. 背景图属性设置 */
		background-repeat: no-repeat;
		/* 不重复平铺 */
		background-size: cover;
		/* 覆盖整个容器（可能裁剪） */
		/* 可选：background-size: contain; 完整显示图片（可能留空白） */

		background-position: center center;
		/* 图片居中显示 */
		background-attachment: scroll;
		/* 随内容滚动（默认值） */

		/* 图片层（在渐变上方） */
		background-blend-mode: overlay;
		/* 混合模式（可选） */
	}

	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 10rpx;
		font-weight: 300;
		box-sizing: border-box;
	}

	.nav-title {
		margin-right: 17rpx;
	}

	.personal-info-page {
		background-color: #f5f5f5;
		height: 100vh;
	}


	.info-list {
		margin-top: 20rpx;
		border-radius: 100rpx;
		padding: 20rpx 20rpx 300rpx;
		margin-top: -260rpx;
	}

	.cardUp {
		border-radius: 20rpx;
		background-color: #fff;
		padding: 10rpx;
		margin-bottom: 20rpx;
	}

	.qrcode-area {
		text-align: center;
		margin: 20rpx 0;
	}

	.qrcode-area image {
		width: 150rpx;
		height: 150rpx;
	}

	.qrcode-label {
		display: block;
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}


	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.verification-code {
		background-color: #fff;
		padding: 20rpx;
		margin: 10rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.code-label {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		display: block;
	}

	.qrcode {
		width: 200rpx;
		height: 200rpx;
	}

	.info-card,
	.detail-card,
	.evaluation-card {
		background-color: #fff;
		padding: 20rpx;
		padding-bottom: 0;
		margin: 10rpx;
		border-radius: 10rpx;
	}

	.info-order {
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		margin-left: -20rpx;
		border-bottom: 4rpx solid #F8F8F8;
	}

	.info-order>text:nth-child(1) {
		font-size: 30rpx;
	}

	.info-title,
	.detail-title,
	.evaluation-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		color: #333;
	}

	.status {
		float: right;
		font-size: 24rpx;
	}

	.statusUnpaid {
		color: #ff7a45;
		font-weight: 600;
	}

	.statusUnevaluated {
		color: #1890ff;
	}

	.statusUnuse {
		color: #ff7a45;
	}

	.statusCompleted {
		color: #4cd964;
	}

	.statusCanceled {
		color: #999;
	}

	.statusRefunded {
		color: #999;
	}

	.info-item {
		display: flex;
		margin-bottom: 30rpx;
	}

	.info-item image {
		width: 26rpx;
		height: 26rpx;
		margin-top: 8rpx;
		margin-left: 30rpx;
	}

	.detail-item,
	.evaluation-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}

	.carService,
	.priceService,
	.couponService {
		margin-bottom: 20rpx;
		border-bottom: 4rpx solid #F8F8F8;
	}

	.label {
		font-size: 20rpx;
		color: #666;
	}

	.value {
		font-size: 20rpx;
		color: #333;
	}

	.price {
		font-size: 26rpx;
		color: #333;
	}

	.discount {
		font-size: 26rpx;
		color: #ff5000;
	}

	.pay-amount {
		font-size: 26rpx;
		color: #4cd964;
	}

	.stars {
		font-size: 26rpx;
		color: #ffcc00;
	}

	.action-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 15rpx 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1rpx solid #eee;
	}

	.contact {
		padding: 20rpx 0;
	}

	.contact image {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: -10rpx;
	}

	.contact-btn {
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
		margin-right: 10rpx;
	}

	.action-btns {
		/* flex: 1; */
		display: flex;
		gap: 10rpx;
		margin-right: 20rpx;
	}

	.action-btn {
		border-radius: 50rpx;
		/* padding: 0rpx 40rpx; */
		font-size: 20rpx;
	}

	.cancel-btn,
	.evaluate-btn,
	.refund-btn {
		background-color: #BFBFBF;
		color: #fff;
	}

	.pay-btn,
	.repeat-btn {
		background-color: #1890ff;
		color: #fff;
	}
</style>